<template>
  <div class="components-dropdown-demo-placement">
    <a-dropdown :getPopupContainer="t => t?.parentElement">
      <div
        style="
          display: flex;
          flex-direction: column;
          align-items: center;
          cursor: pointer;
        "
      >
        <iconfont name="#icon-xianshimoshi" style="font-size: 24px" />
        <div style="display: flex">
          <div>显示模式</div>
          <div><down-outlined /></div>
        </div>
      </div>
      <template #overlay>
        <a-menu>
          <a-menu-item>
            <div
              style="display: flex; cursor: pointer; padding: 0 5px"
              :style="
                selected.includes('mesh') ? { background: '#dbefff' } : {}
              "
              @click="onChange('mesh')"
            >
              <iconfont name="#icon-quanshitu" style="font-size: 24px" />
              <div style="margin-left: 10px">三维显示</div>
            </div>
          </a-menu-item>
          <a-menu-item>
            <div
              style="display: flex; cursor: pointer; padding: 0 5px"
              :style="
                selected.includes('line') ? { background: '#dbefff' } : {}
              "
              @click="onChange('line')"
            >
              <iconfont name="#icon-zhengshitu" style="font-size: 24px" />
              <div style="margin-left: 10px">线框显示</div>
            </div>
          </a-menu-item>
          <a-menu-item>
            <div
              style="display: flex; cursor: pointer; padding: 0 5px"
              :style="
                selected.includes('point') ? { background: '#dbefff' } : {}
              "
              @click="onChange('point')"
            >
              <iconfont name="#icon-houshitu" style="font-size: 24px" />
              <div style="margin-left: 10px">顶点显示</div>
            </div>
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { DownOutlined } from '@ant-design/icons-vue'
import iconfont from '@/components/iconfont.vue'

let emit = defineEmits(['change'])

let selected = ref(['mesh', 'line'])

function onChange(type) {
  if (selected.value.includes(type)) {
    selected.value = selected.value.filter(t => t !== type)
  } else {
    selected.value = [...selected.value, type]
  }
  emit('change', selected.value)
}
</script>
<style scoped>
.components-dropdown-demo-placement .ant-btn {
  margin-right: 8px;
  margin-bottom: 8px;
}
</style>
